<template>
    <div class="Home">
        <div class="middle1">
            <img src="../../assets/image/homeImg/title.png" alt="" class="picture">
            <p class="title2">高效 专注 认真 负责</p>
            <div class="middle">
                <p class="title3">登录</p>
                <input type="text" placeholder="用户名" v-model="username">
                <input type="password" placeholder="密码" v-model="password">
                <button @click="login">登录</button>
            </div>

        </div>
        <Bottom></Bottom>
    </div>
</template>

<script>
    import Bottom from '../bottom/bottom'
    import axios from 'axios'

    export default {
        name: "Home",
        components:{
            Bottom
        },
        data(){
            return{
                username:"",
                password:"",
            }
        },
        methods:{
            login(){
                // this.$router.push({
                //     name:'Show',
                // });
                var url = "http://192.168.3.21:8888/user/login/";
                var data = {
                    username: this.username,
                    password: this.password
                };
                axios({
                    changeOrigin: true,
                    url: url,
                    method: "POST",
                    data: data,
                    headers:{ "Content-Type": "application/json"},
                }).then((res) => {
                    console.log(res);
                });
                //请求拦截
                axios.interceptors.request.use(
                    config => {
                        const token = sessionStorage.getItem('token');
                        if(token){
                            //判断是否存在token，如果存在，每个http header 都加上token
                            config.headers.authentication = token // 请求头加上token
                        }
                        return config
                    },
                    err => {
                        return Promise.reject(err)
                    }
                );

                //响应拦截器
                axios.interceptors.response.use(
                    response => {
                        //拦截响应，做统一处理
                        if(response.data.token){
                            this.$router.push({
                                name:'Show',
                            }).catch(err => {
                                console.log('输出报错',err)
                            });
                        }
                        return response
                    }
                )





            },
        },
        created() {
            let that = this;
            document.onkeydown =function(e){
                e = window.event || e;
                if(that.$route.path=='/'&&(e.code=='Enter'||e.code=='enter')){//验证在登录界面和按得键是回车键enter
                    that.login('loginForm');//登录函数
                }
            }
        }
    }
</script>

<style lang="less">
    .Home{
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url("../../assets/image/homeImg/bg.png") ;
        background-size:100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .middle1{
            margin-top: 235px;
            height: 480px;
            display: flex;
            flex-direction: column;
            align-items: center;


            .picture{
                width: 206px;
                height: 31px;
            }
            .title2{
                margin-top: 12px;
                font-size: 14px;
                font-family:"微软雅黑";
                font-weight: 400;
                line-height: 22px;
                color: rgba(0, 0, 0, 0.8);
                opacity: 1;
            }
            .middle{
                margin-top: 59px;
                display: flex;
                flex-direction: column;
                .title3{
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 24px;
                    color: #000000;
                    opacity: 1;
                }
                input{
                    margin-top: 24px;
                    width: 380px;
                    height: 40px;
                    background: #FFFFFF;
                    opacity: 1;
                    border-radius: 5px;
                    border: none;
                    text-indent: 10px;
                    outline: none;
                }
                button{
                    margin-top: 24px;
                    width: 380px;
                    height: 42px;
                    background: #0E8BF8;
                    opacity: 1;
                    border-radius: 5px;
                    border: none;
                    outline: none;
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    line-height: 24px;
                    color: #FFFFFF;
                    cursor: pointer;
                }
                /*            button:active{*/
                /*                margin-top: 10px;*/
                /*                width: 350px;*/
                /*                height: 42px;*/
                /*                color: white;*/
                /*                border-radius: 5px;*/
                /*                background: #4a9bfa;*/

                /*} */
            }
        }


    }


</style>
